<template>
  <div>
    <h2 class="product-title">商品列表</h2>
    <div>
      <div class="product-header">
        <div class="search-input">
          <el-input size="small" placeholder="请输入搜索信息..."></el-input>
          <el-button size="small" type="danger" icon="el-icon-search">搜索</el-button>
        </div>
        <div class="product-cart">
          <el-badge :value="cartNum" class="item">
            <el-button size="small" class="button-cart" type="success" @click="goCart">我的购物车</el-button>
          </el-badge>
        </div>
      </div>
      <el-table :data="productList" border style="width:100%" size="mini">
        <el-table-column prop="id" label="ID" style="width:10%"/>
        <el-table-column prop="name" label="商品名称" style="width:20%"/>
        <el-table-column prop="number" label="库存" style="width:20%"/>
        <el-table-column prop="price" label="单价￥" style="width:20%"/>
        <el-table-column label="操作" style="width:10%">
          <template slot-scope="scope">
            <el-button type="primary" class="el-icon-goods" size="small" @click="addCart(scope.row)"> 加入购物车</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import '../common/css/common.css';
  export default {
    data() {
      return {
        name: "ProductVm"
      }
    },
    computed: {
      productList() {
        return this.$store.state.product.products;
      },
      cartNum() {
        return this.$store.state.cart.num;
      }
    },
    methods: {
      goCart() {
        this.$router.push({name: 'Cart'});
      },
      addCart(row) {
        let productCount = this.$store.getters['cart/getProductCountById'](row.id);
        if (productCount >= 20) {
          console.log();
          this.$alert("选购商品数量已经超过20件,不能继续添加!", "温馨提示", {
            confirmButtonText: '确定',
            callback: action => {
              ;
            }
          });
        } else {
          this.$store.commit('cart/addCart', row);
        }
      }
    }
  }
</script>

<style scoped>
  .product-cart {
    margin: 5px 0;
    text-align: left;
  }

  .button-cart {
    width: 150px;
  }

  .product-title {
    text-align: center;
    background-color: #DCDFE6;
    height: 50px;
    padding-top: 20px;
  }

  .product-header {
    position: relative;
  }

  .search-input {
    width: 450px;
    margin: 0 auto;
  }

  .search-input .el-input {
    width: 65%;
    padding: 0;
  }

  .search-input .el-button {
    width: 33%;
  }

  .product-cart {
    position: absolute;
    top: -5px;
    right: 0;
  }

  .el-table {
    margin-top: 20px;
  }
</style>
